<template>
  <div class="detail_container">
    <div class="detail_left">
      <img :src="baseURL + book_detail.book_cover" alt="" />
    </div>
    <div class="detail_right">
      <div class="book_name">{{ book_detail.book_name }}</div>
      <div class="book_info">
        <div>作 者: {{ book_detail.book_author }}</div>
        <div>出版社: {{ book_detail.book_press }}</div>
        <div>卖 家: {{ book_detail.book_seller }}</div>
        <div>卖家备注: {{ book_detail.book_remarks }}</div>
      </div>
      <div class="book_price">
        <div style="height:29px;line-height:29px;">
          <span class="price_title">原价</span>
          <span class="price yuanjia"
            >￥{{ book_detail.book_price_yuanjia }}</span
          >
        </div>
        <div style="height:29px;line-height:29px;">
          <span class="price_title">售价</span>
          <span class="price">￥{{ book_detail.book_price_xianjia }}</span>
        </div>
      </div>
      <div class="detail_date">
        <span style="margin-right:18px;">发布时间</span>
        <span style="color:#000;">{{ book_detail.book_date }}</span>
      </div>
      <div class="detail_num">
        <span style="letter-spacing:5px;margin-right:14px">库存量</span>
        <span style="color:red;">{{ book_detail.book_num }}本</span>
      </div>
      <div class="detail_btn">
        <el-button type="warning" @click="addShoppingCart(book_detail.book_id)"
          >加入购物车</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  data() {
    return {
      book_id: '',
      // 详情数据
      book_detail: {},
      baseURL: 'http://127.0.0.1:3000/'
    }
  },
  // 通过路由获取商品id
  created() {
    if (this.$route.query.bookId != undefined) {
      this.book_id = this.$route.query.bookId
    }
    this.getBookDetail()
  },
  methods: {
    ...mapActions('user', ['setShowLogin']),
    ...mapActions('shopcart', ['unshiftShoppingCart', 'addShoppingCartNum']),
    // 获取图书详情数据
    async getBookDetail() {
      console.log(this.book_id)
      const { data: res } = await this.$http.get(
        '/book/getBookById' + '/' + this.book_id
      )
      if (res.code !== 200) return this.$message.error('获取图书信息失败')
      this.book_detail = res.data[0]
      console.log(this.book_detail)
    },
    // 添加商品至购物车
    async addShoppingCart(bookId) {
      if (!this.getUser) {
        this.setShowLogin(true)
        return
      }
      console.log(this.getShoppingCart)
      // const { data: res } = await this.$http.post('/shopcart/findShopCart', {
      //   book_id: bookId,
      //   username: this.getUser
      // })
      // console.log(res)
      // 判断购物车中是否有该图书 有为true
      let flag = false
      this.getShoppingCart.forEach(item => {
        if (item.shopcart_book_id == bookId) {
          flag = true
        }
      })
      // 如果不存在该书
      if (!flag) {
        const { data: res } = await this.$http.post('/shopcart/addShopCart', {
          book_id: bookId,
          username: this.getUser
        })
        if (res.code !== 200) return this.$message.error('加入购物车失败')
        // 获取插入的数据
        const { data: resInfo } = await this.$http.post(
          '/shopcart/findShopCart',
          {
            book_id: bookId,
            username: this.getUser
          }
        )
        // 更新购物车vuex
        this.unshiftShoppingCart(resInfo.data)
        this.$message.success('已加入购物车!')
      } else {
        // 购物车中存在该图书 让购物车中的商品数量+1
        let exist = this.getShoppingCart.find(
          item => item.shopcart_book_id === bookId
        )
        console.log(exist)
        // 如果小于库存量
        if (exist.num < exist.book_num) {
          const { data: res } = await this.$http.put(
            '/shopcart/updateShopCart',
            {
              num: exist.num + 1,
              book_id: bookId,
              username: this.getUser
            }
          )
          if (res.code !== 200) return this.$message.error('更新购物车失败')
          this.addShoppingCartNum(bookId)
          console.log(this.getShoppingCart)
          this.$message.success('购物车中已存在该商品,数量+1')
        } else {
          this.$message.error('超出库存量')
        }
      }
    }
  },
  computed: {
    ...mapGetters('user', ['getUser']),
    ...mapGetters('shopcart', ['getShoppingCart'])
  }
}
</script>

<style lang="scss" scoped>
.detail_container {
  display: flex;
  justify-content: center;
  background-color: #fff;
  padding: 20px;
}
.detail_left {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  img {
    max-width: 300px;
    max-height: 300px;
  }
}
.detail_right {
  width: 460px;
  margin-left: 20px;
  background-color: #fff;
  .book_name {
    font-size: 20px;
    color: #777;
    font-weight: bolder;
    line-height: 28px;
  }
  .book_info {
    width: 470px;
    height: 100px;
    border: 1px solid #e5e5e5;
    margin-top: 10px;
    padding: 6px 0 6px 9px;
    font-size: 14px;
    color: #777;
    div {
      height: 25px;
      line-height: 25px;
    }
  }
  .book_price {
    width: 460px;
    height: 58px;
    margin-top: 12px;
    background-color: #f3f0e9;
    padding: 7px 0px;
    .price_title {
      display: inline-block;
      text-align: left;
      font-size: 12px;
      margin: 0 19px 0 10px;
      color: #999;
    }
    .price {
      margin-right: 5px;
      font-size: 18px;
      color: #8c222c;
      font-weight: bolder;
    }
    .yuanjia {
      text-decoration: line-through;
      color: #777;
      font-size: 16px;
    }
  }
  .detail_date {
    font-size: 14px;
    color: #777;
    height: 35px;
    line-height: 40px;
  }
  .detail_num {
    font-style: 14px;
    color: #777;
    height: 30px;
    line-height: 30px;
  }
  .detail_btn {
    margin-top: 13px;
  }
}
</style>
